<script setup lang="ts">
import { onMounted, ref } from "vue";
import ResultComp from "@/components/ResultComp.vue";
import { useRoute, useRouter } from "vue-router";
import { getAllEvaluationId, getEvaluationResultById } from "@/apis";
import { useUserStore } from "@/store";

const discussions = ref<any[]>([]);
const router = useRouter();
const userStore = useUserStore();

onMounted(async () => {
  // const rawData = await getAllEvaluationId();
  const rawData = await getEvaluationResultById(userStore.getUID);
  discussions.value = rawData.data?.eva_list;
});

const showInputFlag = ref(true);
const getEvaluationResultHandler = () => {
  showInputFlag.value = !showInputFlag.value;
};

/**
 *
 * @param evaluationID {string}
 */
const handleClickGoToResult = (evaluationID: any) => {
  if (evaluationID) {
    router.push(`/evaluationResult/${evaluationID}`);
  } else {
    router.push("/evaluationResult");
  }
};

const route = useRoute();

const dynamicParamId = ref((route.params.id as string) || "");
</script>

<template>
  <div>
    <div class="code-input" v-if="showInputFlag">
      <h3>请输入评估码，查询评估结果：</h3>
      <el-container>
        <el-input v-model="dynamicParamId" id="id-input"></el-input>
        <el-button @click="getEvaluationResultHandler" type="primary" plain
          >查询结果
        </el-button>
      </el-container>
    </div>
    <div v-if="!showInputFlag">
      <result-comp :eva-id="dynamicParamId"></result-comp>
    </div>
    <!--    <div v-if="showInputFlag">-->
    <!--      请按照下面的表头，将各水厂同一时期所对应的数据在excel表格中罗列好，随后复制到下面的粘贴区域即可（注：输入的数据不可为负值）。其中，药剂的选择应尽可能的选择各个水厂都用到的药剂，以增加水厂之间的可比性。用户可根据水厂的情况，自行加列，以选择多种药剂。固定好药剂种类后，按照表头输入数据即可开展评估。-->
    <!--    </div>-->
    <br />
    <div v-if="discussions.length === 0">暂无历史评估记录</div>
    <el-card
      v-if="showInputFlag"
      v-for="discussion in discussions"
      :key="discussion.uuid"
      class="box-card"
    >
      <template #header>
        <div
          class="card-header"
          @click="handleClickGoToResult(discussion?.uuid)"
        >
          测评ID: {{ discussion?.uuid }} | 测评名称: {{ discussion?.name }}
        </div>
      </template>

      <div class="text item">
        <div @click="handleClickGoToResult(discussion.uuid)">
          复制上面的评估码查询
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
#id-input {
  min-width: 200px;
}
</style>
